<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
			<el-form-item label="省" prop="provinceId">
				<el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="chooseProvince" :disabled="isEdit"
					clearable>
					<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="市" prop="cityId">
				<el-select v-model="queryParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
					<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="区/县" prop="countyId">
				<el-select v-model="queryParams.countyId" placeholder="请选择区/县" clearable>
					<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="margin-left: 40px;">
				<el-button type="primary" @click="handleQuery">查询</el-button>
				<el-button plain @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="Download" @click="handleImport">导入</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
			</el-col>
		</el-row>

		<el-table v-loading="loading" ref="tableRef" :data="dataList" stripe @selection-change="handleSelectionChange"
			row-key="id" class="headborder-table">
			<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
			<el-table-column label="省" align="center" prop="province" />
			<el-table-column label="市" align="center" prop="city" />
			<el-table-column label="区/县" align="center" prop="county" />
			<el-table-column label="砌体结构" align="center" prop="">
				<el-table-column label="砖混结构" align="center" prop="brickConcrete">
					<template #default="scope">
						{{ Number(scope.row.brickConcrete).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column label="石木结构" align="center" prop="stoneWood">
					<template #default="scope">
						{{ Number(scope.row.stoneWood).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column label="砖木结构" align="center" prop="brickWood">
					<template #default="scope">
						{{ Number(scope.row.brickWood).toFixed(2) }}
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column label="钢筋混凝土结构" align="center" prop="" width="300">
				<el-table-column label="框架结构" align="center" prop="reinforcedConcreteFrame">
					<template #default="scope">
						{{ Number(scope.row.reinforcedConcreteFrame).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column label="框架-剪力墙结构" align="center" prop="reinforcedConcreteFrameShearWall">
					<template #default="scope">
						{{ Number(scope.row.reinforcedConcreteFrameShearWall).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column label="剪力墙结构" align="center" prop="reinforcedConcreteShearWall">
					<template #default="scope">
						{{ Number(scope.row.reinforcedConcreteShearWall).toFixed(2) }}
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column label="土木结构" align="center" prop="soilWood">
				<template #default="scope">
					{{ Number(scope.row.soilWood).toFixed(2) }}
				</template>
			</el-table-column>
			<el-table-column label="木结构" align="center" prop="wood">
				<template #default="scope">
					{{ Number(scope.row.wood).toFixed(2) }}
				</template>
			</el-table-column>
			<el-table-column label="钢结构" align="center" prop="steel">
				<template #default="scope">
					{{ Number(scope.row.steel).toFixed(2) }}
				</template>
			</el-table-column>
			<el-table-column label="工业厂房" align="center" prop="">
				<el-table-column label="砖混结构厂房" align="center" prop="industrialBrickConcrete">
					<template #default="scope">
						{{ Number(scope.row.industrialBrickConcrete).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column label="钢筋混凝土结构厂房" align="center" prop="industrialReinforcedConcrete">
					<template #default="scope">
						{{ Number(scope.row.industrialReinforcedConcrete).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column label="钢结构厂房" align="center" prop="industrialSteel">
					<template #default="scope">
						{{ Number(scope.row.industrialSteel).toFixed(2) }}
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column label="组合结构" align="center" prop="composite">
				<template #default="scope">
					{{ Number(scope.row.composite).toFixed(2) }}
				</template>
			</el-table-column>
			<el-table-column label="其他" align="center" prop="other">
				<template #default="scope">
					{{ Number(scope.row.other).toFixed(2) }}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button type="text" @click="handleUpdate(scope.row)">修改</el-button>
					<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
			@pagination="getList" />

		<!-- 修改 -->
		<el-dialog v-model="open" width="1000px" title="修改" append-to-body :show-close="false" :close-on-click-modal="false" custom-class="buildingResetPrice-add-dialog">
			<el-scrollbar>
				<el-form ref="ruleForm" :model="form" :rules="rules" label-width="160px">
					<el-row>
						<el-col :span="8">
							<el-form-item label="省" prop="provinceId">
								<el-select v-model="form.provinceId" placeholder="请选择省" @change="chooseFormProvince" style="width: 100%;">
									<el-option v-for="item in provinceFormData" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="市" prop="cityId">
								<el-select v-model="form.cityId" placeholder="请选择市" @change="chooseFormCity" style="width: 100%;">
									<el-option v-for="item in cityFormData" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="区/县" prop="countyId">
								<el-select v-model="form.countyId" placeholder="请选择区/县" @change="chooseFormCounty" style="width: 100%;">
									<el-option v-for="item in areaFormData" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider></el-divider>
					<el-row>
						<el-col :span="6" class="tab-title" :offset="1">
							砌体结构
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="砖混结构" prop="brickConcrete">
								<el-input v-model="form.brickConcrete" placeholder="请输入砖混结构" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="石木结构" prop="stoneWood">
								<el-input v-model="form.stoneWood" placeholder="请输入石木结构" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="砖木结构" prop="brickWood">
								<el-input v-model="form.brickWood" placeholder="请输入砖木结构" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider></el-divider>
					<el-row>
						<el-col :span="6" class="tab-title" :offset="1">
							钢筋混凝土结构
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="框架结构" prop="reinforcedConcreteFrame">
								<el-input v-model="form.reinforcedConcreteFrame" placeholder="请输入框架结构" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="框架-剪力墙结构" prop="reinforcedConcreteFrameShearWall">
								<el-input v-model="form.reinforcedConcreteFrameShearWall" placeholder="请输入框架-剪力墙结构" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="剪力墙结构" prop="reinforcedConcreteShearWall">
								<el-input v-model="form.reinforcedConcreteShearWall" placeholder="请输入剪力墙结构" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider></el-divider>
					<el-row>
						<el-col :span="8">
							<el-form-item label="土木结构" prop="soilWood" label-width="120px">
								<el-input v-model="form.soilWood" placeholder="请输入土木结构" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="木结构" prop="wood">
								<el-input v-model="form.wood" placeholder="请输入木结构" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="钢结构" prop="steel">
								<el-input v-model="form.steel" placeholder="请输入钢结构" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider></el-divider>
					<el-row>
						<el-col :span="6" class="tab-title" :offset="1">
							工业厂房
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="砖混结构厂房" prop="industrialBrickConcrete">
								<el-input v-model="form.industrialBrickConcrete" placeholder="请输入砖混结构厂房" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="钢筋混凝土结构厂房" prop="industrialReinforcedConcrete">
								<el-input v-model="form.industrialReinforcedConcrete" placeholder="请输入钢筋混凝土结构厂房" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="钢结构厂房" prop="industrialSteel">
								<el-input v-model="form.industrialSteel" placeholder="请输入钢结构厂房" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider></el-divider>
					<el-row>
						<el-col :span="12">
							<el-form-item label="组合结构" label-width="130px" prop="composite">
								<el-input v-model="form.composite" placeholder="请输入组合结构" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="其他" label-width="130px" prop="other">
								<el-input v-model="form.other" placeholder="请输入其他" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="城镇地区室内财产(元/每平米)" label-width="130px" prop="dhpTownIndoorProperty">
								<el-input v-model="form.dhpTownIndoorProperty" placeholder="请输入" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="农村地区室内财产(元/平米)" label-width="130px" prop="dhpVillageIndoorProperty">
								<el-input v-model="form.dhpVillageIndoorProperty" placeholder="请输入" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-scrollbar>

			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="updateForm" auto-insert-space>修改</el-button>
					<el-button plain @click="closeForm" auto-insert-space>取消</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 导入对话框 -->
		<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
			<p></p>
			<el-upload ref="uploadRef" :limit="1" accept=".xlsx,xls" :headers="upload.headers" :action="upload.url"
				:disabled="upload.isUploading" :before-upload="handleFileBeforeUpload" :on-progress="handleFileUploadProgress"
				:on-error="handleFileUploadError" :on-success="handleFileSuccess" :auto-upload="false" drag>
				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<template #tip>
					<div class="el-upload__tip text-center">
						<span>仅允许导入xlsx,xls格式文件。</span>
						<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
							@click="importTemplate('建筑物重置单价导入模板.xlsx')">下载模板</el-link>
					</div>
				</template>
			</el-upload>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitFileForm">确 定</el-button>
					<el-button plain @click="upload.open = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { getProvince, getChildArea } from "@/api/system/division"
import { ElMessageBox } from 'element-plus'
import { listData, updateResetPrice, getDetail, delResetPrice, getRole } from '@/api/basicDataManage/buildingResetPrice'
import { getToken } from "@/utils/auth"
const { proxy } = getCurrentInstance()
// 导入参数
const upload = reactive({
	open: false,
	title: "",
	isUploading: false,
	headers: { token: "token " + getToken() },
	url: import.meta.env.VITE_APP_BASE_API + "/buildingResetUnitPrice/upload"
});
const dataList = ref([]);
const ids = ref([]);
const isEdit = ref(false);
const loading = ref(false);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
const provinceFormData = ref([]); //省
const cityFormData = ref([]); //市
const areaFormData = ref([]); //区、县
const open = ref(false);
const selectData = ref([]);

// 最多保留两位小数
const positive2decimals = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	var re = /^\d+(.\d{1,2})?$/;
	if (!re.test(value)) {
		callback(new Error());
	} else {
		callback();
	}
}

const data = reactive({
	queryParams: {
		page: 1,
		rows: 10,
		provinceId: '',
		cityId: '',
		countyId: '',
	},
	form: {},
	rules: {
		provinceId: [{
			required: true,
			message: "省不能为空",
			trigger: "change"
		}],

		cityId: [{
			required: true,
			message: "市不能为空",
			trigger: "change"
		}],
		countyId: [{
			required: true,
			message: "区/县不能为空",
			trigger: "change"
		}],
		brickConcrete: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		stoneWood: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		brickWood: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		reinforcedConcreteFrame: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		reinforcedConcreteFrameShearWall: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		reinforcedConcreteShearWall: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		soilWood: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		wood: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		steel: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		industrialBrickConcrete: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		industrialReinforcedConcrete: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		industrialSteel: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		composite: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		other: [{
			required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		dhpTownIndoorProperty: [{
			// required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
		dhpVillageIndoorProperty: [{
			// required: true,
			message: "最多保留两位小数",
			trigger: "blur",
			validator: positive2decimals
		}],
	}
})
const { queryParams, form, rules } = toRefs(data);

async function getUserRole() {
	await getRole().then(response => {
		if (response.data.role == "PRI") {
			isEdit.value = true;
			queryParams.value.provinceId = response.data.provinceId;
			editProvinceData(response.data.provinceId)
		}
		getList();
	});
}

// 重置数据
function reset() {
	proxy.resetForm("ruleForm");
}

/** 修改按钮操作 */
function handleUpdate(row) {
	reset();
	const id = row.id
	getDetail(id).then(response => {
		form.value = response.data;
		form.value.brickConcrete = Number(form.value.brickConcrete).toFixed(2);
		form.value.stoneWood = Number(form.value.stoneWood).toFixed(2);
		form.value.brickWood = Number(form.value.brickWood).toFixed(2);
		form.value.reinforcedConcreteFrame = Number(form.value.reinforcedConcreteFrame).toFixed(2);
		form.value.reinforcedConcreteFrameShearWall = Number(form.value.reinforcedConcreteFrameShearWall).toFixed(2);
		form.value.reinforcedConcreteShearWall = Number(form.value.reinforcedConcreteShearWall).toFixed(2);
		form.value.soilWood = Number(form.value.soilWood).toFixed(2);
		form.value.wood = Number(form.value.wood).toFixed(2);
		form.value.steel = Number(form.value.steel).toFixed(2);
		form.value.industrialBrickConcrete = Number(form.value.industrialBrickConcrete).toFixed(2);
		form.value.industrialReinforcedConcrete = Number(form.value.industrialReinforcedConcrete).toFixed(2);
		form.value.industrialSteel = Number(form.value.industrialSteel).toFixed(2);
		form.value.composite = Number(form.value.composite).toFixed(2);
		form.value.other = Number(form.value.other).toFixed(2);
		form.value.dhpTownIndoorProperty = Number(form.value.dhpTownIndoorProperty).toFixed(2);
		form.value.dhpVillageIndoorProperty = Number(form.value.dhpVillageIndoorProperty).toFixed(2);
		editProvinceFormData(form.value.provinceId, form.value.cityId);

		open.value = true;
	});

}
function updateForm() {
	proxy.$refs["ruleForm"].validate(valid => {
		if (valid) {
			updateResetPrice(form.value).then(response => {
				proxy.$modal.msgSuccess("修改成功");
				open.value = false;
				getList();
			});
		}
	})
}
/** 删除按钮操作 */
function handleDelete(row) {
	const id = row.id || ids.value.join(",");
	proxy.$modal.confirm('是否确认删除该数据项？').then(function () {
		return delResetPrice(id);
	}).then(() => {
		getList();
		proxy.$modal.msgSuccess("删除成功");
	}).catch(() => { });
}

// 关闭
function closeForm() {
	open.value = false;
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.page = 1;
	getUserRole();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef");
	handleQuery();
}

/** 查询数据列表 */
function getList() {
	loading.value = true;
	listData({...queryParams.value}).then(response => {
		dataList.value = response.data.rows ? response.data.rows : [];
		total.value = response.data.total;
		loading.value = false;
	});
}

// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map(item => item.id);
	single.value = selection.length != 1;
	multiple.value = !selection.length;
	selectData.value = selection;
}

function chooseProvince(value) {
	queryParams.value.cityId = null;
	queryParams.value.countyId = null;
	cityData.value = [];
	getChildArea(value).then(response => {
		cityData.value = response.data;
	});
}

function chooseCity(value) {
	queryParams.value.countyId = null;
	areaData.value = [];
	getChildArea(value).then((response) => {
		areaData.value = response.data;
	});
}

function chooseFormProvince(value) {
	form.value.cityId = null;
	form.value.countyId = null;
	cityFormData.value = [];
	getChildArea(value).then(response => {
		cityFormData.value = response.data;
	});
	provinceFormData.value.forEach(item => {
		if (item.id == value) {
			form.value.province = item.name;
		}
	})
}

function chooseFormCity(value) {
	form.value.countyId = null;
	areaFormData.value = [];
	getChildArea(value.id).then((response) => {
		areaFormData.value = response.data;
	});
	cityFormData.value.forEach(item => {
		if (item.id == value) {
			form.value.city = item.name;
		}
	})
}

function chooseFormCounty(value) {
	areaFormData.value.forEach(item => {
		if (item.id == value) {
			form.value.county = item.name;
		}
	})
}

/** 获取省列表 */
function getProvinceData() {
	getProvince().then(response => {
		provinceData.value = response.data;
		provinceFormData.value = response.data;
	});
}
function editProvinceData(provinceId) {
	if (provinceId) {
		getChildArea(provinceId).then(response => {
			cityData.value = response.data;
			areaData.value = [];
		});
	}
}

function editProvinceFormData(provinceId, cityId) {
	if (!provinceId && !cityId) {
		cityFormData.value = [];
		areaFormData.value = [];
	}
	if (provinceId && !cityId) {
		getChildArea(provinceId).then(response => {
			cityFormData.value = response.data;
			areaFormData.value = [];
		});
	}
	if (provinceId && cityId) {
		getChildArea(provinceId).then(response => {
			cityFormData.value = response.data;
		});
		getChildArea(cityId).then(response => {
			areaFormData.value = response.data;
		});
	}
	proxy.resetForm("ruleFormData");
}
// 模板下载
function importTemplate(name) {
	proxy.download("/base/product/downloadExcel", {
		fileName: name
	}, name);
};

/** 提交上传文件 */
function submitFileForm() {
	proxy.$refs["uploadRef"].submit();
}

/** 打开导入表弹窗 */
function handleImport() {
	upload.title = "导入";
	upload.open = true;
}

/**文件上传前处理 */
function handleFileBeforeUpload(file) {
	proxy.$modal.loading("正在上传文件，请稍候...");
	return true
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
	upload.isUploading = true;
};
// 上传失败
function handleFileUploadError(err) {
	proxy.$modal.closeLoading();
	proxy.$modal.msgError("上传文件失败");
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
	upload.open = false;
	upload.isUploading = false;
	proxy.$modal.closeLoading();
	proxy.$refs["uploadRef"].handleRemove(file);
	proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.message + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
	getList();
};
getProvinceData();
getUserRole();
</script>

<style lang="scss" scoped>
.expandTable {
	padding: 5px 20px 5px 105px;

	h3 {
		font-weight: bold;
	}

	p {
		margin: 0px;
		line-height: 25px !important;
	}
}

.tab-title {
	font-size: 16px;
	font-weight: bold;
	border-left: 4px solid var(--el-color-primary);;
	font-family: PingFangSC-Medium;
	padding-left: 10px;
	margin-bottom: 20px;
}

:deep(.el-drawer__header) {
	margin-bottom: 0px !important;
}

.el-form--inline .el-form-item {
	margin-right: 0px !important;
}

:deep(.el-table__expand-icon) {
	display: none;
}

// :deep(.el-table thead.is-group th.el-table__cell) {
// 	border-right: 1px solid #FFFFFF !important;
// 	border-bottom: 1px solid #FFFFFF !important;
// }

// table td {
// 	border: 1px solid #c6c6c6;
// }

// table th {
// 	border: 1px solid #c6c6c6;
// }
</style>
<style lang="scss">
.buildingResetPrice-add-dialog {
  height: 85%;
  overflow: hidden;

  &>.el-dialog__body {
    height: calc(100% - 126px);
    overflow-y: auto;
    padding: 0;

    .el-scrollbar__view {
      padding: 20px;
    }
  }
}
</style>